// 文字内容颜色
$font-color-senior: #4974f5; // 一级

// 单行文字隐藏
@mixin line-overflow {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// 多行文字隐藏
@mixin multi-overflow($line-sum: 2) {
  -webkit-line-clamp: $line-sum; // 用来限制在一个块元素显示的文本的行数
  display: -webkit-box; // 将对象作为弹性伸缩盒模型显示
  -webkit-box-orient: vertical; //设置或检查伸缩盒对象的子元素的排列方式
  text-overflow: ellipsis; // 在多行文本的情况下，用...隐藏超出范围的文本
  word-break: break-all;
  overflow: hidden;
  white-space: normal;
}

@mixin diy-scrollbar {
  &::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    -webkit-appearance: none;
  }

  &::-webkit-scrollbar-corner {
    background-color: transparent;
  }

  &::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    background-clip: padding-box;
    border-radius: 10px;
    background-color: rgba(35, 46, 64, 0.1);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#1a232e40, endColorstr=#1a232e40);
  }

  &::-webkit-scrollbar-track,
  &::-webkit-scrollbar-track:hover {
    background-color: transparent;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0d232e40, endColorstr=#0d232e40);
  }

  &::-webkit-scrollbar-track {
    border-radius: 5px;
  }
}

// 隐藏滚动条
@mixin hide-scrollbar {
  scrollbar-width: none;

  &::-webkit-scrollbar {
    display: none;
  }
}

// flex 居中
@mixin flex-c-c($direction: column) {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: $direction;
}

// 绝对居中
@mixin abs-cover {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

// 将错误提示放到 输入框上面
@mixin tooltip-popover {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, calc(-100% - 10px));
  z-index: 2;
  min-width: 250px;
  min-height: 32px;
  line-height: 1.5;
  font-size: $font-size-small;
  padding: 6px 8px;
  color: #fff;
  text-align: left;
  text-decoration: none;
  word-wrap: break-word;
  background-color: rgba(0, 0, 0, 0.75);
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);

  &:before {
    content: " ";
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    border-top: 5px solid rgba(0, 0, 0, 0.75);
  }
}
